<template>
	<view class="main-msg">
		<view class="container" v-if="inputInfo.type=='DC'">
			<view class="tabs-box">
				<view class="tabs-item" v-for="(item,index) in tabsType" :key="item.name" @click="clickTab(item.name,index)"
					:class="{'active-tab':activeIndex==index,'active-right':activeIndex==index+1,'active-left':activeIndex==index-1}">
					{{item.name}}
				</view>
			</view>
			<view class="table-box">
				<view class="">
					历史数据
				</view>
				<view class="table-s">
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 30rpx;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center" width="220rpx">测量时间</uni-th>
							<uni-th align="center"  width="220rpx">数值</uni-th>
							<uni-th align="center" width="180rpx">评估</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in 3" :key="item">
							<uni-td align="center">2020-10-20</uni-td>
							<uni-td align="center">110</uni-td>
							<uni-td align="center" style="color: #0ADD9E;">正常</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view class="chat-box" :class="inputInfo.type=='US'?'longHeight':''">
			<scroll-view
			 class="chatting-list" 
			 scroll-y
			 refresher-enabled
			 :scroll-top="scrollTop"
			 @scrolltoupper="handleScrolltoupper"
			 :style="{height:showMores?'calc(100% - 360rpx)':'calc(100% - 180rpx)'}"
			 >
				<view v-for="(item,index) in msgList" :key="index" class="chat-item" :class="item.type==inputInfo.type?'right-item':''">
					<image class="headimg" :src="item.headImg"  mode="scaleToFill">
				     <view class="msgs-item">
						 <span class="ligs"></span>
				     	{{item.messageContent}}
				     </view>
					 <span class="times">{{$u.timeFormat(item.sendTime, 'mm-dd hh:MM')}}</span>
				</view>
			</scroll-view>
			<view class="chat-input">
				<view class="input-text">
					<image src="@/static/icon/chat-voice.png" mode="widthFix"></image>
					<u--input
					    placeholder=""
						maxlength="60"
						clearable
						color="#000"
						style="background-color: #F3F4F8;"
					    border="surround"
					    v-model="inputInfo.message"
					  ></u--input>
					  <button type="default" class="send-bth" v-if="inputInfo.message"  @click="sendMsg">发送</button>
					  <image src="@/static/icon/chat-add.png" v-else mode="widthFix" @click="showMores=!showMores"></image>
				</view>
				<view class="addInput" :style="{height:showMores?'180rpx':'0rpx'}">
					<view class="more-bth">
						<image src="@/static/icon/doc3.png" mode="widthFix"></image>
						<span>文件</span>
					</view>
					<view class="more-bth">
						<image src="@/static/icon/doc1.png" mode="widthFix"></image>
						<span>待办</span>
					</view>
					<view class="more-bth">
						<image src="@/static/icon/doc2.png" mode="widthFix"></image>
						<span>日程</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
   import {findUserChatData,findDoctorChatData} from "@/common/api/index.js"
	export default {
		data() {
			return {
				userInfo:{},
				inputInfo:{
					message:"",
					userId: JSON.parse(uni.getStorageSync('doctorInfo')).id,
					toUserId:'',
					type:""
				},
				msgList:[],
				showMores:false,
				tabsType: [{
						name: '血压'
					},
					{
						name: '血糖'
					},
					{
						name: '体重'
					},
					{
						name: '尿酸'
					},
				],
				activeIndex: 0,
				socketTast:null,
				scrollTop:9999,
				msgInfo:{
					pageNum:1,
					pageSize:3,
					id:""
				},
				total:0,
			}
		},
		methods: {
			clickTab(item,index){
				this.activeIndex = index
			},
			//获取消息列表
			async getMsglist(){
				let res = null
				if(this.inputInfo.type=="US"){
					res = await findDoctorChatData(this.msgInfo)
				}else{
					res = await findUserChatData(this.msgInfo)
				}
				// console.log(res)
				this.total = res.data.total
				if(res.data.rows.length>0)res.data.rows.reverse()
				if(this.msgInfo.pageNum==1){
					this.msgList = res.data.rows
				}else{
					this.msgList = res.data.rows.concat(this.msgList)
				}
				res.data.rows.forEach((v,i)=>{
					if(v.senderId==this.inputInfo.userId){
						v['headImg'] = JSON.parse(uni.getStorageSync('doctorInfo')).headImgUrl
					}else{
						v['headImg'] =this.userInfo.headImgUrl
					}
				})
			},
			//查看历史消息
			handleScrolltoupper(){
				if(this.total<=(this.msgInfo.pageNum*this.msgInfo.pageSize))return 
				uni.$u.throttle(()=>{
					this.msgInfo.pageNum++
					this.getMsglist()
				}, 1000) 
			},
			//发送消息
			sendMsg(){
				if(this.inputInfo.message){
					this.socketTast.send({
						data:JSON.stringify(this.inputInfo),
						success:()=>{
							// console.log(this.inputInfo)
							this.msgList.push(
							  {
								  headImg: JSON.parse(uni.getStorageSync('doctorInfo')).headImgUrl,
								  messageContent: this.inputInfo.message,
								  receiverId: this.inputInfo.toUserId,
								  sendTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
								  whetherRead: 0,
								  type:this.inputInfo.type
							  }
							)
							this.inputInfo.message = '';
						},
						fail:()=>{
							uni.showToast({
							  icon: 'none',
							  position: 'top',
							  title: '请重新尝试发送！'
							});
							 this.$store.dispatch('websocketInit',JSON.parse(uni.getStorageSync('doctorInfo')).id)
							 this.socketTast = this.$store.state.socketTast
						}
					})
				}
				
			}
		    
		},
		onShow() {
			this.getMsglist()
			this.socketTast = this.$store.state.socketTast
			if(!this.socketTast){
				this.$store.dispatch('websocketInit',JSON.parse(uni.getStorageSync('doctorInfo')).id)
				this.socketTast = this.$store.state.socketTast
			}
			//接收消息
			this.socketTast.onMessage((res)=>{
					if(JSON.parse(res.data).userId==this.inputInfo.toUserId){
						this.msgList.push(
						  {
							  headImg: JSON.parse(res.data).headImgUrl,
							  messageContent: JSON.parse(res.data).textMessage,
							  receiverId: JSON.parse(uni.getStorageSync('doctorInfo')).id,
							  sendTime: JSON.parse(res.data).sendTime,
							  whetherRead: 1,
							  type:this.inputInfo.type=="US"?"DC":"US"
						  }
						)
					}
			})
			setTimeout(() => {
			    this.scrollTop = this.scrollTop + 1;
			 }, 100)
		},
		onLoad(option) {
			// console.log(option)
			this.userInfo = JSON.parse(decodeURIComponent(option.item));
			this.inputInfo.type = JSON.parse(uni.getStorageSync('doctorInfo')).type
			this.msgInfo.id = this.userInfo.userId
			uni.setNavigationBarTitle({ title: this.userInfo.nickName?this.userInfo.nickName:"..." });
			this.inputInfo.toUserId = this.userInfo.userId
		}
	}
</script>

<style lang="scss" scoped>
.main-msg{
	width: 100vw;
	background-color: #F3F5F7;
	display: flex;
	flex-direction: column;
	.container{
		width: 100%;
		padding: 30rpx;
		.tabs-box {
			width: 100%;
			display: flex;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background: linear-gradient(#EBEFF7 50%, #fff 100%);
			overflow: hidden;
			.tabs-item {
				flex: 1;
				text-align: center;
				background-color: #EBEFF7;
				padding: 30rpx 0;
				text-align: center;
				font-weight: 500;
				color: #080808;
			}
		
			.active-tab {
				background-color: #fff;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;
			}
		
			.active-tab::after {
				content: "";
				width: 40rpx;
				height: 8rpx;
				background: #40D49F;
				box-shadow: 0rpx 0rpx 6rpx 0rpx #40D49F;
				border-radius: 4rpx;
				position: absolute;
				bottom: 0;
				left: calc(50% - 20rpx);
			}
		
			.active-right {
				border-radius: 0rpx 0rpx 20rpx 0rpx;
			}
		
			.active-left {
				border-radius: 0rpx 0rpx 0rpx 20rpx;
			}
		}
	    .table-box{
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
		}
	}
    .chat-box{
    	height: calc(100vh - 690rpx);
		padding-bottom:  constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		display: flex;
		flex-direction: column;
		.chatting-list{
			width: 100%;
			height: calc(100% - 180rpx);
			padding:30rpx 20rpx;
			.chat-item{
				width: 100%;
				margin: 30rpx 0;
				display: flex;
				flex-direction: row;
				gap: 30rpx;
				align-self: center; 
				.headimg{
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
				.msgs-item{
					max-width: 60%;
					min-width: 20%;
					word-break: break-all;
					padding: 20rpx;
					font-weight: 400;
					font-family: PingFangSC, PingFang SC;
					background-color: #fff;
					filter: drop-shadow(0 0 10rpx #B6B6B6);
					border-radius: 0rpx 20rpx 20rpx 20rpx;
					position: relative;
					font-size: 24rpx;
					color: #03081A;
					// .ligs{
						
					// }
				}
				.msgs-item::before{
					content: "";
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent; 
					border-right: 10rpx solid #fff;
					border-left: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					position: absolute;
					left: -20rpx;
					top: 0;
				}
				.times{
					font-family: PingFangSC, PingFang SC;
					font-size: 10rpx;
					color: #c8c8c8;
				}
			}
			.right-item{
				flex-direction: row-reverse;
				
				.msgs-item{
					background-color: #3C84FF;
					color: #fff;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}
				.msgs-item::before{
					content: "";
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent; 
					border-right: 10rpx solid transparent;
					border-left: 10rpx solid #3C84FF;
					border-bottom: 10rpx solid transparent;
					position: absolute;
					left:calc(100% - 1rpx);
					top: 2rpx;
				}
				
			}
		}
		.chat-input{
			transition: all 0.5s; 
			background-color: #fff;
			padding: 0rpx 20rpx;
			.input-text{
				width: 100%;
				height: 180rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
				image{
					width: 70rpx;
				}
				.send-bth{
					width: 100rpx;
					border-radius:80rpx;
					padding:0;
					font-size: 20rpx;
					color:#fff;
					background-color:rgb(10, 221, 158);
				}
			}
			.addInput{
				height: 0rpx;
				overflow: hidden;
				display: flex;
				background-color: #fff;
				width: 100%;
				justify-content: space-around;
				.more-bth{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 10rpx;
					font-size: 30rpx;
					font-family: PingFangSC;
					color: #000000;
					image{
						width: 74rpx;
					}
				}
				
			}
		}
    }
	.longHeight{
		height:calc(100vh - 80rpx);
		width: 100%;
		display: flex;
		flex-direction: column;
	}
}
</style>
